﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MemberArea/MasterPage.master" AutoEventWireup="true" CodeFile="TableDesign.aspx.cs" Inherits="MemberArea_TableDesign" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
	<!-- MAIN CONTENT -->
	<div id="content">
		
		<div class="page-full-width cf">

			<div class="content-module">
			
				<div class="content-module-heading cf">
				
					<h3 class="fl">Full width page</h3>
					<span class="fr expand-collapse-text">Click to collapse</span>
					<span class="fr expand-collapse-text initial-expand">Click to expand</span>
				
				</div> <!-- end content-module-heading -->
				
				
				<div class="content-module-main">
				
					<p>This is a page that spans the entire available space. You can use this as an alternative to the two-column 
					layout that you saw in <a href="dashboard.html">the dashboard page</a>.</p>
					
					<p>Here's what a table looks like when spanned the entire width.</p>
					
					<table>
					
						<thead>
					
							<tr>
								<th><input type="checkbox" id="table-select-all"></th>
								<th>Name</th>
								<th>Username</th>
								<th>Email</th>
								<th>Actions</th>
							</tr>
						
						</thead>

						<tfoot>
						
							<tr>
							
								<td colspan="5" class="table-footer">
								
									<label for="table-select-actions">With selected:</label>

									<select id="table-select-actions">
										<option value="option1">Delete</option>
										<option value="option2">Export</option>
										<option value="option3">Archive</option>
									</select>
									
									<a href="#" class="round button blue text-upper small-button">Apply to selected</a>	

								</td>
								
							</tr>
						
						</tfoot>
						
						<tbody>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>

							<tr>
								<td><input type="checkbox"></td>
								<td>Adrian Purdila</td>
								<td>adipurdila</td>
								<td><a href="#">adipurdila@gmail.com</a></td>
								<td>
									<a href="#" class="table-actions-button ic-table-edit"></a>
									<a href="#" class="table-actions-button ic-table-delete"></a>
								</td>
							</tr>
						
						</tbody>
						
					</table>
					
					<div class="stripe-separator"><!--  --></div>
					
					<p>When you resize the page, all the elements inside the page will resize as well, this being a liquid or fluid layout.</p>
					
				</div> <!-- end content-module-main -->
			
			</div> <!-- end content-module -->
		
		</div> <!-- end full-width -->
			
	</div>
    
     <!-- end content -->
</asp:Content>

